<div id="packages">
    <section class=" text-center py-5" id="package"
        style="background-image: linear-gradient(to bottom, #990099, #7e007e, #640064, #4b004b, #330033);; color: #fff;">
        <div class="container" id="receipt">
            <div ng-repeat="package in $ctrl.user.obj.order_packages| orderBy:'priority'"
                class="package-wrapper clearfix">

                <h2 style="font-weight: 500;" ng-bind="package.obj.title"></h2>
                <p ng-bind="package.obj.description"></p>
                <table class="tbl-package d-none d-lg-block" style="width: 100%; border: none;" border="1">
                    <tbody>
                        <tr>
                            <th width="20%">&nbsp;TV Model</th>
                            <th width="20%">&nbsp;Qty</th>
                            <th width="6%">&nbsp;Units</th>
                            <th width="20%">&nbsp;Sub-dealer Reward</th>
                            <th class="sum-th">
                                <span style="float: left;" ng-bind="package.obj.title"
                                    ng-class="{'text-danger': !package.isValid}"></span>
                                <span style="float: right;">
                                    <a href="#" class="btn btn-minus btn-minus-dark"
                                        ng-click="$ctrl.updatePackageQuantity(package, -1)">-</a>
                                    <a href="#" class="btn btn-plus btn-dark"
                                        ng-click="$ctrl.updatePackageQuantity(package, 1)">+</a>
                                    <span ng-bind="package.obj.quantity"></span>
                                </span>
                            </th>
                        </tr>
                        <tr ng-repeat="slot in package.obj.package_slots| orderBy:'priority' track by $index">
                            <td colspan="3" style="padding:0">
                                <table class="tbl-package-slot" width="100%">
                                    <tr>
                                        <th width="42%"></th>
                                        <th width="42%"></th>
                                        <th></th>
                                    </tr>
                                    <tr ng-repeat="item in slot.obj.package_items| orderBy:'priority' track by $index">
                                        <td ng-class="{'no-border-bottom': $index == 0, 'no-border-top': $index > 0 }"
                                            width="20%" ng-bind="item.obj.products[0].obj.title"></td>
                                        <td width="20%" class="no-border-bottom">
                                            <a href="#" class="btn btn-minus"
                                                ng-show="slot.obj.package_items.length > 1"
                                                ng-click="$ctrl.updateItemQuantity(package, item, -1)">-</a>
                                            <a href="#" class="btn btn-plus" ng-show="slot.obj.package_items.length > 1"
                                                ng-click="$ctrl.updateItemQuantity(package, item, 1)">+</a>
                                            <span ng-bind="item.obj.quantity"></span>
                                        </td>
                                        <td ng-if="$index==0" class="no-border-bottom" rowspan="2" class="text-center">
                                            <span ng-bind="slot.obj.total_unit"></span>
                                        </td>

                                    </tr>
                                </table>
                            </td>
                            <td ng-if="$index == 0" rowspan="{{package.obj.package_slots.length + 1}}"
                                class="text-center"><span ng-bind="package.obj.gifts[0].obj.title"></span></td>
                        </tr>
                        <tr>
                            <td colspan="2">&nbsp;TOTAL</td>
                            <td><span ng-bind="package.obj.total"></span></td>
                            <!-- <td rowspan="{{package.obj.package_slots.length + 1}}" class="text-center"><span>L32D3000 x 1 Unit</span></td> -->
                        </tr>
                    </tbody>
                </table>

                </br>

                <table class="tbl-package tbl-package-mobile d-lg-none" style="width: 100%; border: none;" border="1">
                    <tbody>
                        <tr>
                            <th width="40%">&nbsp;TV Model</th>
                            <th width="50%">&nbsp;Qty</th>
                            <th width="10%">&nbsp;Units</th>
                        </tr>
                        <tr ng-repeat="slot in package.obj.package_slots">
                            <td colspan="3" style="padding:0">
                                <table class="tbl-package-slot" width="100%">
                                    <tr>
                                        <th width="40%"></th>
                                        <th width="50%"></th>
                                        <th></th>
                                    </tr>
                                    <tr ng-repeat="item in slot.obj.package_items| orderBy:'priority' track by $index">
                                        <td ng-class="{'no-border-bottom': $index == 0, 'no-border-top': $index > 0 }"
                                            width="20%" ng-bind="item.obj.products[0].obj.title"></td>
                                        <td width="20%" class="no-border-bottom">
                                            <a href="#" class="btn btn-minus"
                                                ng-show="slot.obj.package_items.length > 1"
                                                ng-click="$ctrl.updateItemQuantity(package, item, -1)">-</a>
                                            <a href="#" class="btn btn-plus" ng-show="slot.obj.package_items.length > 1"
                                                ng-click="$ctrl.updateItemQuantity(package, item, 1)">+</a>
                                            <span ng-bind="item.obj.quantity"></span>
                                        </td>
                                        <td ng-if="$index==0" class="no-border-bottom" rowspan="2" class="text-center">
                                            <span ng-bind="slot.obj.total_unit"></span>
                                        </td>

                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2">&nbsp;TOTAL</th>
                            <td><span ng-bind="package.obj.total"></span></td>
                        </tr>
                        <tr>
                            <th colspan="3">&nbsp;Sub-dealer Reward</th>
                        </tr>
                        <td colspan="3">
                            <span ng-bind="package.obj.gifts[0].obj.title"></span>
                        </td>
                        </tr>
                        <tr>
                            <th class="sum-th" colspan="3">
                                <span style="float: left;" ng-class="{'text-danger': !package.isValid}"
                                    ng-bind="package.obj.title"></span>
                                <span style="float: right;">
                                    <a href="#" class="btn btn-minus btn-minus-dark"
                                        ng-click="$ctrl.updatePackageQuantity(package, -1)">-</a>
                                    <a href="#" class="btn btn-plus btn-dark"
                                        ng-click="$ctrl.updatePackageQuantity(package, 1)">+</a>
                                    <span ng-bind="package.obj.quantity"></span>
                                </span>
                            </th>
                        </tr>
                    </tbody>
                </table>

                <!-- DivTable.com -->
            </div>
            <div>
                <table class="tbl-package tbl-final d-none d-lg-block" style="width: 100%; border: none;" border="1">
                    <tr>
                        <th width="90%"> FINAL TOTAL UNIT</th>
                        <th><span ng-bind="$ctrl.totalUnit"></span></th>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <table>
                                <tr>
                                    <td>Final Gift</td>
                                    <td ng-repeat="package in $ctrl.user.obj.order_packages"
                                        ng-if="package.isValid && package.obj.quantity > 0">
                                        <span class="gift-title" ng-bind="package.obj.gifts[0].obj.title"></span>
                                        <span class="gift-quantity" ng-bind="package.obj.quantity"></span>

                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <table class="tbl-package-mobile tbl-final d-lg-none">
                    <tr>
                        <td width="90%"> FINAL TOTAL UNIT</td>
                        <td><span ng-bind="$ctrl.totalUnit"></span></td>
                    </tr>

                    <tr>
                        <td colspan="2"> Final Gifts</td>
                    </tr>

                    <tr ng-repeat="package in $ctrl.user.obj.order_packages"
                        ng-if="package.isValid && package.obj.quantity > 0">
                        <td colspan="2">
                            <span style="float: left;" ng-bind="package.obj.gifts[0].obj.title"></span>
                            <span style="float: right;" ng-bind="package.obj.quantity"></span>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- <div class="container-login100-form-btn m-t-17">
                    
                <button class="login100-form-btn sign-in_label  ml-auto mr-auto" ng-click="$ctrl.submit()">
                    Submit
                </button>
            </div> -->
        </div>
        <div class="container-login100-form-btn m-t-17">

            <button class="login100-form-btn sign-in_label  ml-auto mr-auto" ng-click="$ctrl.export()">
                Export
            </button>
        </div>
    </section>

</div>